<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - Speakr</title>
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* Dark Mode CSS Variables */
        :root {
            /* Light mode variables */
            --bg-primary: #f3f4f6; /* gray-100 */
            --bg-secondary: #ffffff; /* white */
            --bg-tertiary: #f9fafb; /* gray-50 */
            --bg-accent: #dbeafe; /* blue-100 */
            --bg-accent-hover: #bfdbfe; /* blue-200 */
            --bg-button: #2563eb; /* blue-600 */
            --bg-button-hover: #1d4ed8; /* blue-700 */
            --bg-danger: #dc2626; /* red-600 */
            --bg-danger-hover: #b91c1c; /* red-700 */
            --bg-danger-light: #fee2e2; /* red-100 */
            --bg-info-light: #dbeafe; /* blue-100 */
            --bg-warn-light: #fef3c7; /* amber-100 */
            --bg-success-light: #d1fae5; /* green-100 */
            --bg-pending-light: #f5f5f4; /* stone-100 */
            --bg-input: #ffffff; /* white */

            --text-primary: #1f2937; /* gray-800 */
            --text-secondary: #374151; /* gray-700 */
            --text-muted: #6b7280; /* gray-500 */
            --text-light: #9ca3af; /* gray-400 */
            --text-accent: #1d4ed8; /* blue-700 */
            --text-button: #ffffff; /* white */
            --text-danger: #b91c1c; /* red-700 */
            --text-danger-strong: #991b1b; /* red-800 */
            --text-info-strong: #1e40af; /* blue-800 */
            --text-warn-strong: #92400e; /* amber-800 */
            --text-success-strong: #065f46; /* green-800 */
            --text-pending-strong: #44403c; /* stone-700 */

            --border-primary: #e5e7eb; /* gray-200 */
            --border-secondary: #d1d5db; /* gray-300 */
            --border-accent: #93c5fd; /* blue-300 */
            --border-danger: #f87171; /* red-400 */
            --border-focus: #3b82f6; /* blue-500 */
            --ring-focus: #bfdbfe; /* blue-200 */
        }

        .dark {
            /* Dark mode variables */
            --bg-primary: #111827; /* gray-900 */
            --bg-secondary: #1f2937; /* gray-800 */
            --bg-tertiary: #374151; /* gray-700 */
            --bg-accent: #1e3a8a; /* blue-900 */
            --bg-accent-hover: #1e40af; /* blue-800 */
            --bg-button: #2563eb; /* blue-600 */
            --bg-button-hover: #3b82f6; /* blue-500 */
            --bg-danger: #dc2626; /* red-600 */
            --bg-danger-hover: #ef4444; /* red-500 */
            --bg-danger-light: #7f1d1d; /* red-900 */
            --bg-info-light: #1e3a8a; /* blue-900 */
            --bg-warn-light: #78350f; /* amber-900 */
            --bg-success-light: #064e3b; /* green-900 */
            --bg-pending-light: #292524; /* stone-800 */
            --bg-input: #374151; /* gray-700 */

            --text-primary: #f3f4f6; /* gray-100 */
            --text-secondary: #d1d5db; /* gray-300 */
            --text-muted: #9ca3af; /* gray-400 */
            --text-light: #6b7280; /* gray-500 */
            --text-accent: #60a5fa; /* blue-400 */
            --text-button: #ffffff; /* white */
            --text-danger: #f87171; /* red-400 */
            --text-danger-strong: #fca5a5; /* red-300 */
            --text-info-strong: #93c5fd; /* blue-300 */
            --text-warn-strong: #fcd34d; /* amber-300 */
            --text-success-strong: #6ee7b7; /* green-300 */
            --text-pending-strong: #d6d3d1; /* stone-300 */

            --border-primary: #374151; /* gray-700 */
            --border-secondary: #4b5563; /* gray-600 */
            --border-accent: #1d4ed8; /* blue-700 */
            --border-danger: #ef4444; /* red-500 */
            --border-focus: #3b82f6; /* blue-500 */
            --ring-focus: #1e40af; /* blue-800 */
        }

        html {
            background-color: var(--bg-primary); 
            color: var(--text-primary); 
            transition: background-color 0.3s, color 0.3s; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        html, body { height: 100%; margin: 0; }
    </style>
</head>
<body class="bg-[var(--bg-primary)] text-[var(--text-primary)]">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col min-h-screen">
        <header class="flex justify-between items-center mb-6 pb-4 border-b border-[var(--border-primary)]">
            <h1 class="text-3xl font-bold text-[var(--text-primary)]">
                <a href="{{ url_for('index') }}" class="flex items-center">
                    <img src="{{ url_for('static', filename='img/favicon.svg') }}" alt="Speakr Logo" class="h-9 w-9 mr-2">
                    Speakr
                </a>
            </h1>
            <div class="flex items-center space-x-2">
                <button id="darkModeToggle" class="p-2 rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
                    <i id="darkModeIcon" class="fas fa-moon"></i>
                </button>
                <div class="relative" id="userDropdown">
                    <button id="userDropdownButton" class="flex items-center px-3 py-2 border border-[var(--border-secondary)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-accent)] focus:outline-none">
                        <i class="fas fa-user mr-2"></i>
                        <span>{{ current_user.username }}</span>
                        <i class="fas fa-chevron-down ml-2"></i>
                    </button>
                    <div id="userDropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-lg z-10">
                        <a href="{{ url_for('index') }}" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-home mr-2"></i> Home
                        </a>
                        <a href="{{ url_for('account') }}" class="block px-4 py-2 text-[var(--text-accent)] bg-[var(--bg-accent)]">
                            <i class="fas fa-user-circle mr-2"></i> Account
                        </a>
                        {% if current_user.is_admin %}
                        <a href="{{ url_for('admin') }}" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-user-shield mr-2"></i> Admin
                        </a>
                        {% endif %}
                        <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-danger)]">
                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <main class="flex-grow">
            <div class="bg-[var(--bg-secondary)] p-8 rounded-xl shadow-lg border border-[var(--border-primary)]">
                <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-6">Account Information</h2>
                
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="mb-4 p-3 rounded-lg {% if category == 'success' %}bg-[var(--bg-success-light)] text-[var(--text-success-strong)]{% elif category == 'danger' %}bg-[var(--bg-danger-light)] text-[var(--text-danger-strong)]{% else %}bg-[var(--bg-info-light)] text-[var(--text-info-strong)]{% endif %}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <div class="mb-6">
                            <h3 class="text-lg font-medium text-[var(--text-secondary)] mb-2">User Details</h3>
                            <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                                <div class="mb-3">
                                    <span class="block text-sm font-medium text-[var(--text-muted)]">Username</span>
                                    <span class="block text-[var(--text-primary)]">{{ current_user.username }}</span>
                                </div>
                                <div>
                                    <span class="block text-sm font-medium text-[var(--text-muted)]">Email</span>
                                    <span class="block text-[var(--text-primary)]">{{ current_user.email }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-medium text-[var(--text-secondary)] mb-2">Account Actions</h3>
                            <div class="flex flex-col space-y-3">
                                <a href="{{ url_for('index') }}" class="inline-flex items-center px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-md hover:bg-[var(--bg-button-hover)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--border-focus)] transition-colors duration-200">
                                    <i class="fas fa-microphone mr-2"></i> Go to Recordings
                                </a>
                                <button id="changePasswordBtn" class="inline-flex items-center px-4 py-2 border border-[var(--border-secondary)] text-[var(--text-secondary)] rounded-md hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--border-focus)] transition-colors duration-200">
                                    <i class="fas fa-key mr-2"></i> Change Password
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-medium text-[var(--text-secondary)] mb-2">Account Statistics</h3>
                        <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <div class="grid grid-cols-2 gap-4">
                                <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)] shadow-sm">
                                    <span class="block text-3xl font-bold text-[var(--text-accent)]">{{ current_user.recordings|length }}</span>
                                    <span class="block text-sm text-[var(--text-muted)]">Total Recordings</span>
                                </div>
                                
                                <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)] shadow-sm">
                                    <span class="block text-3xl font-bold text-[var(--text-accent)]">
                                        {% set completed_count = current_user.recordings|selectattr('status', 'equalto', 'COMPLETED')|list|length %}
                                        {{ completed_count }}
                                    </span>
                                    <span class="block text-sm text-[var(--text-muted)]">Completed</span>
                                </div>
                                
                                <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)] shadow-sm">
                                    <span class="block text-3xl font-bold text-[var(--text-warn-strong)]">
                                        {% set processing_count = current_user.recordings|selectattr('status', 'in', ['PENDING', 'PROCESSING', 'SUMMARIZING'])|list|length %}
                                        {{ processing_count }}
                                    </span>
                                    <span class="block text-sm text-[var(--text-muted)]">Processing</span>
                                </div>
                                
                                <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)] shadow-sm">
                                    <span class="block text-3xl font-bold text-[var(--text-danger)]">
                                        {% set failed_count = current_user.recordings|selectattr('status', 'equalto', 'FAILED')|list|length %}
                                        {{ failed_count }}
                                    </span>
                                    <span class="block text-sm text-[var(--text-muted)]">Failed</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="text-center py-4 mt-8 text-xs text-[var(--text-light)] border-t border-[var(--border-primary)]">
            Speakr &copy; {{ now.year }}
        </footer>
    </div>

    <!-- Change Password Modal -->
    <div id="changePasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-[var(--bg-secondary)] p-6 rounded-lg shadow-xl w-full max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold text-[var(--text-primary)]">Change Password</h3>
                <button id="closeModalBtn" class="text-[var(--text-light)] hover:text-[var(--text-muted)] text-2xl leading-none">&times;</button>
            </div>
            <form id="changePasswordForm" method="POST" action="{{ url_for('change_password') }}">
                <div class="mb-4">
                    <label for="current_password" class="block text-sm font-medium text-[var(--text-secondary)] mb-1">Current Password</label>
                    <input type="password" id="current_password" name="current_password" required class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] bg-[var(--bg-input)] text-[var(--text-primary)]">
                </div>
                <div class="mb-4">
                    <label for="new_password" class="block text-sm font-medium text-[var(--text-secondary)] mb-1">New Password</label>
                    <input type="password" id="new_password" name="new_password" required minlength="8" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] bg-[var(--bg-input)] text-[var(--text-primary)]">
                    <p class="text-xs text-[var(--text-muted)] mt-1">Password must be at least 8 characters long</p>
                </div>
                <div class="mb-6">
                    <label for="confirm_password" class="block text-sm font-medium text-[var(--text-secondary)] mb-1">Confirm New Password</label>
                    <input type="password" id="confirm_password" name="confirm_password" required class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] bg-[var(--bg-input)] text-[var(--text-primary)]">
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancelBtn" class="px-4 py-2 bg-[var(--bg-tertiary)] text-[var(--text-secondary)] rounded-md hover:bg-[var(--border-secondary)]">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-md hover:bg-[var(--bg-button-hover)]">Change Password</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Dark mode toggle functionality
        const darkModeToggle = document.getElementById('darkModeToggle');
        const darkModeIcon = document.getElementById('darkModeIcon');
        
        // Initialize dark mode based on localStorage or system preference
        function initializeDarkMode() {
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const savedMode = localStorage.getItem('darkMode');
            
            if (savedMode === 'true' || (savedMode === null && prefersDark)) {
                document.documentElement.classList.add('dark');
                darkModeIcon.classList.remove('fa-moon');
                darkModeIcon.classList.add('fa-sun');
            } else {
                document.documentElement.classList.remove('dark');
                darkModeIcon.classList.remove('fa-sun');
                darkModeIcon.classList.add('fa-moon');
            }
        }
        
        // Toggle dark mode
        darkModeToggle.addEventListener('click', () => {
            const isDarkMode = document.documentElement.classList.toggle('dark');
            localStorage.setItem('darkMode', isDarkMode);
            
            if (isDarkMode) {
                darkModeIcon.classList.remove('fa-moon');
                darkModeIcon.classList.add('fa-sun');
            } else {
                darkModeIcon.classList.remove('fa-sun');
                darkModeIcon.classList.add('fa-moon');
            }
        });
        
        // User dropdown functionality
        const userDropdownButton = document.getElementById('userDropdownButton');
        const userDropdownMenu = document.getElementById('userDropdownMenu');
        
        userDropdownButton.addEventListener('click', () => {
            userDropdownMenu.classList.toggle('hidden');
        });
        
        // Close dropdown when clicking outside
        document.addEventListener('click', (event) => {
            if (!userDropdownButton.contains(event.target) && !userDropdownMenu.contains(event.target)) {
                userDropdownMenu.classList.add('hidden');
            }
        });
        
        // Initialize dark mode on page load
        initializeDarkMode();
        
        // Change Password Modal functionality
        const changePasswordBtn = document.getElementById('changePasswordBtn');
        const changePasswordModal = document.getElementById('changePasswordModal');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const changePasswordForm = document.getElementById('changePasswordForm');
        const newPasswordInput = document.getElementById('new_password');
        const confirmPasswordInput = document.getElementById('confirm_password');
        
        // Open modal
        changePasswordBtn.addEventListener('click', () => {
            changePasswordModal.classList.remove('hidden');
            // Reset form
            changePasswordForm.reset();
        });
        
        // Close modal functions
        function closeModal() {
            changePasswordModal.classList.add('hidden');
        }
        
        closeModalBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);
        
        // Close modal when clicking outside
        changePasswordModal.addEventListener('click', (event) => {
            if (event.target === changePasswordModal) {
                closeModal();
            }
        });
        
        // Form validation
        changePasswordForm.addEventListener('submit', (event) => {
            if (newPasswordInput.value !== confirmPasswordInput.value) {
                event.preventDefault();
                alert('New password and confirmation do not match.');
            }
        });
    </script>
</body>
</html>
